<template>
	<div class="app-container">
		<el-row class='content-container' v-if="userComanyId =='null'||userComanyId == '0'">
			<el-button type="primary" @click="addData('CARD')" size="mini">添加学习卡</el-button>
			<el-button type="primary" @click="addData('CARD_PACKAGE')" size="mini">添加套餐卡</el-button>
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
				<el-table-column prop="content" label="具体配置" align="center"></el-table-column>
				<el-table-column prop="price" label="金额" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.price}}元</span>
					</template>
				</el-table-column>
				<el-table-column prop="num" label="数量" align="center"></el-table-column>
				
				<el-table-column label="操作" align="center" width="400px" v-if="userComanyId =='null'||userComanyId == '0'">
					<template slot-scope="scope">
						<!--<el-button size="mini"type="primary" @click="changeData(scope.row)">修改</el-button>-->
						<el-button size="mini"type="danger" @click="removeData(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-reqData="reqData.currentPage" :reqData-count="totalPageSize" :reqData-sizes="[10, 20, 30, 50]" :reqData-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
		<!--弹窗-->
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="700px" :modal-append-to-body='false'>
			<el-form :model="orderDetailForm" :rules="rules" ref="dataForm"  style='width: 80%;margin-left: 30px; '>
				<div v-show="orderDetailForm.productType == 'CARD'">
					<el-form-item label="产品类型" prop="productType" :label-width="formLabelWidth">
						<el-radio v-model="orderDetailForm.productType" label="CARD">学习卡</el-radio>
					</el-form-item>
					<el-form-item label="选择产品" :label-width="formLabelWidth">
						<el-select v-model="orderDetailForm.productId" placeholder="请选择" style='width: 220px;' @change="changeProductOption">
							<el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					
				</div>
				<div v-show="orderDetailForm.productType == 'CARD_PACKAGE'">
					<el-form-item label="产品类型" prop="productType" :label-width="formLabelWidth">
						<el-radio v-model="orderDetailForm.productType" label="CARD_PACKAGE">套餐卡</el-radio>
					</el-form-item>
					<el-form-item label="有效天数" :label-width="formLabelWidth">
						<el-input v-model="validity" :disabled="true" class="input-width" style='width: 220px;'></el-input>
					</el-form-item>		
					<el-form-item label="价格(元)" :label-width="formLabelWidth">
						<el-input v-model="orderDetailForm.card.currentPrice" class="input-width" style='width: 220px;'></el-input>
					</el-form-item>						
					<el-form-item label="账号数" :label-width="formLabelWidth">
						<el-input v-model="orderDetailForm.card.accountNum" class="input-width" style='width: 220px;'></el-input>
					</el-form-item>	
					<el-form-item label="课程有效期(天)" :label-width="formLabelWidth">
						<el-input v-model="orderDetailForm.card.courseDay" class="input-width" style='width: 220px;'></el-input>
					</el-form-item>	
					<el-form-item label="说明" :label-width="formLabelWidth">
						<el-input v-model="orderDetailForm.card.content"  type="textarea" class="input-width" style='width: 220px;'></el-input>
					</el-form-item>	
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createData" v-if="dialogStatus === 'create'">确 定</el-button>
				<el-button type="primary" @click="updateData" v-else>确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {getComanyId} from '@/utils/auth'
	import { getOrderListDetail, saveOrderDetail, deleteOrderDetail, productList} from '@/api/order'
	import { safariDate, getMomentValue } from '@/utils/index'
	export default {
		name:"orderDetail",
		data() {
			return {
				ceshi:"",
				userComanyId:"",
				validity:"一年",//有效期
				list: [],
				companyId:0,
				totalPageSize: 0,
				totalResultSize: 0,
				validityDateType:"days",
				reqData: {
					currentPage: 1,
					orderId:"",
					courseName:"",
				},
				formLabelWidth: '120px',
				dialogFormVisible:false,
				dialogStatus: "",
				textMap: {
					update: '修改订单明细',
					create: '添加订单明细'
				},
				orderDetailForm:{
					companyId:"",
					productId:"",
					orderId:"",
					productType:"",
					card:{
						courseDay:"",
						currentPrice:"",
						accountNum:"",
						content:"",
						name:"帐号卡",
					}
				},
				options:[
					{value: 1,label: "按天数"},
					{value: 2,label: "按到期时间"}
				],
				productOptions:[],//学习卡列表
				packageOptions:[
					{value: 1,label: "帐号卡"},
					{value: 2,label: "学员卡"},
					{value: 3,label: "课程卡"},
					{value: 4,label: "无限卡"},
				],//套餐卡列表
				rules: {
					courseId: [{
						required: true,
						message: '请输入课程ID',
						trigger: 'blur'
					}],
					courseName: [{
						required: true,
						message: '请输入课程名称',
						trigger: 'blur'
					}],
					startTime: [{
						required: true,
						message: '请选择开课日期',
					}],
					endTime: [{
						required: true,
						message: '请选择结束日期',
					}],
				}
				
				
			}
		},
		created(){
			let query = this.$route.query;
			this.userComanyId = getComanyId();
			this.companyId = query.companyId;
			this.reqData.orderId = query.orderId;
			this.orderDetailForm.orderId = query.orderId;
			this.orderDetailForm.companyId = query.companyId;
			this.getList({orderId:query.orderId});
			this.getProductList('CARD');
		},
		methods: {
			getProductList(productType){
				productList(productType).then((res)=>{
					res.entity.forEach((item)=>{
						this.productOptions.push({value: item.id,label: item.name})
					});
				})
			},
			getList(data){
				getOrderListDetail(data).then((res)=>{
					let entitys = res.entity;
					this.list = [...entitys.data];
					this.totalPageSize = entitys.page.totalPageSize;
					this.totalResultSize = entitys.page.totalResultSize;
				});
			},
			deleteOrderDetail(id){
				this.$confirm('是否确定删除订单？ 删除之后将无法恢复！', '提示', {
					confirmButtonText: '确定删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteOrderDetail(id).then((res)=>{
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000
						});
						this.getList(this.reqData);
					})	
				})
				
			},
			saveOrderDetail(text){
				let that = this;
				let FormData = this.orderDetailForm;
				this.$refs['dataForm'].validate((valid) => {
					if(valid) {
						saveOrderDetail(FormData).then((res) => {
							that.getList(that.reqData);
							that.dialogFormVisible = false
							that.$notify({
								title: '成功',
								message: text + '成功',
								type: 'success',
								duration: 2000
							});

						});
					}
				});
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
				
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.resetCurrent();
				this.getList(this.reqData);	
			},
			resetOrderDetailForm(){
				this.orderDetailForm = {
					orderId:this.reqData.orderId,
					productType:"",
					productId:"",
					productName:"",
					companyId:this.companyId,
					card:{
						courseDay:"",
						currentPrice:"",
						accountNum:"",
						content:"",
						name:"帐号卡",
					}
				}
			},
			addData(val){
				this.resetOrderDetailForm();
				this.orderDetailForm.productType = val;
				if(val == 'CARD'){
					this.orderDetailForm.card = {};
				}else{
					this.orderDetailForm['vue_qs_type'] = true;
				}
				this.dialogFormVisible = true;
				this.dialogStatus = "create";	
			},
			changeData(row){
				this.dialogFormVisible = true;
				let {orderId, productType, productId, productName  } = row;
				this.orderDetailForm = {
					orderId,
					companyId,
					productType,
					productId,
					productName
				};
				this.dialogStatus = "update";
			},
			removeData(id){
				this.deleteOrderDetail(id);
			},
			
			createData(){
				this.saveOrderDetail("创建");
			},
			updateData(){
				this.saveOrderDetail("修改");
			},
			changeProductOption(val){
				/*let currentObj = {};
	            currentObj = this.productOptions.find((item)=>{
	                return item.value === val;
	            });
 				this.orderDetailForm.productName = currentObj.label;*/
			},
			changePackage(val){
				let currentObj = {};
	            currentObj = this.packageOptions.find((item)=>{
	                return item.value === val;
	            });
 				this.orderDetailForm.card.name = currentObj.label;
			}
 
		}
	}
</script>

<style>

</style>